// 运维首页
import type { opeHomepageStateType } from './typings'
import type { MyToDoStateType } from '~/pages/oam/toDo/typings'
import { defineComponent, reactive, ref, onMounted, watch } from 'vue'
import { useStore } from 'vuex'
// import { useRouter } from 'vue-router'
import {
  ElRow,
  ElCard,
  ElCol,
  ElButton,
  ElRadioGroup,
  ElRadioButton,
  ElTabs,
  ElTabPane,
  ElLink,
  ElIcon
} from 'element-plus'
import { DArrowRight } from '@element-plus/icons-vue'
import TableList from '~/pages/oam/components/opeHomepage/TableList' // 工单 | 巡视 待办
import OrdersUpdate from '~/pages/oam/components/opeHomepage/OrdersUpdate' // 新增 | 编辑 工单
import PatrolsUpdate from '~/pages/oam/components/opeHomepage/PatrolsUpdate' // 新增 | 编辑 巡视
import MyToDoOptions from '~/pages/oam/toDo/options'
import AliIcon from '~/components/AliIocn'
import styles from '~/pages/oam/index.module.scss'

export default defineComponent(function OpeHomepage() {
  const store = useStore()
  // const router = useRouter()
  /* 初始值 */
  const state = reactive<opeHomepageStateType>({
    // 是否显示
    showOrdersUpdate: false, // 新增工单 弹窗是否显示
    showPatrolsUpdate: false, // 新增巡视 弹窗是否显示
    fromPatrol: null, // 是否来自巡视记录详情, 这里作空传
    addTicketShow: false, // 新增工作票申请
    // 个人统计
    weekOrMonth: 'week', // 本周 本月
    // 待办处理
    activeName: 'first',
    orderToDo: true, // 显示工哪个待办列表
    // 工单统计数
    detail: {
      createdOrders: 0, // 新增工单
      executedOrders: 0, // 处理工单
      timeOutedOrder: 0, // 工单超时
      executedPatrol: 0, // 巡视处理
      timeOutedPatrol: 0 // 巡视超时
    }
  })
  const toDoState = reactive<MyToDoStateType>({
    activeTabKey: 'agency',
    visible: false,
    record: undefined
  })

  const orderTodoList = ref() // 待办任务列表

  watch(
    () => state.weekOrMonth,
    () => {
      workStatisticsAjax()
    }
  )
  watch(
    () => state.activeName,
    () => {
      if (state.activeName === 'first') {
        // 工单待办
        state.orderToDo = true
      }
      if (state.activeName === 'second') {
        // 巡视待办
        state.orderToDo = false
      }
    }
  )

  onMounted(() => {
    workStatisticsAjax()
  })

  /* methods */
  // 页面或弹窗是否显示
  const showPages = (value: string) => {
    if (value === 'showOrdersUpdate') {
      // 新增工单
      // state.showOrdersUpdate = true
      // router.push({ path: '/oam/orderManage/ordersUpdate', query: { type: 'add' } })
      store.dispatch('user/MatchRouterOptionsJumpAddress', {
        path: '/oam/orderManage',
        query: { type: 'add' }
      })
    }
    if (value === 'showPatrolsUpdate') {
      // 新增巡视
      // state.showPatrolsUpdate = true
      // router.push({ path: '/oam/tour/plan/compile', query: { type: 'add' } })
      store.dispatch('user/MatchRouterOptionsJumpAddress', {
        path: '/oam/tour/plan',
        query: { type: 'add' }
      })
    }
    if (value === 'addTicketShow') {
      // 新增工作票
      state.addTicketShow = true
    }
    if (value === 'lookMore') {
      // 查看更多
      store.dispatch('user/MatchRouterNameJumpAddress', 'oam_toDo')
    }
  }

  // 关新增工单弹窗
  const handleOrdersUpdateClose = () => {
    workStatisticsAjax() // 刷新 个人统计
    toRefreshProSaasTable() // 刷新 待办任务
    state.showOrdersUpdate = false
  }

  // 关新增巡视弹窗
  const handlePatrolsUpdateClose = () => {
    state.showPatrolsUpdate = false
  }

  // 个人统计
  const workStatisticsAjax = async () => {
    const res = await store.dispatch('opeHomepage/GetPersonStatistics', state.weekOrMonth)
    if (res?.code === 200) {
      state.detail = res.data
    }
  }

  // 刷新待办任务列表
  const toRefreshProSaasTable = () => {
    orderTodoList.value.refreshProSaasTable()
  }

  // 关待办详情
  const toHandleChangeOptionsVisible = () => {
    toDoState.visible = false
  }

  // 待办详情
  const toDoDetail = (visible: boolean, record?: any, activeTabKey?: string) => {
    if (record?.processDefinitionKey === 'product_patrol') {
      // router.push({ path: '/oam/tour/task/info', query: { id: record?.businessKey } })
      store.dispatch('user/MatchRouterOptionsJumpAddress', {
        path: '/oam/tour/task',
        query: { id: record?.businessKey }
      })
    }
    if (record?.processDefinitionKey === 'product_order') {
      toDoState.visible = visible
      toDoState.record = record
      toDoState.activeTabKey = activeTabKey ?? ''
    }
  }

  return () =>
    !toDoState.visible ? (
      <div class={styles['ope-homePage']}>
        <div class={styles['to-bottom']}>
          <ElRadioGroup
            v-model={state.weekOrMonth}
            size="default"
            class={styles['weekOrMonth-radioGroup']}
          >
            <ElRadioButton label="week">本周</ElRadioButton>
            <ElRadioButton label="month">本月</ElRadioButton>
          </ElRadioGroup>
          <ElRow>
            <ElButton class={styles['perNum-add']}>
              <ElRow>
                <ElCol span={20}>
                  <span class={styles['perNum-span']}>{state.detail.createdOrders}</span>
                  <br />
                  新增工单
                </ElCol>
                <ElCol span={4}>
                  <div class={styles['perNum-icon']}>
                    <AliIcon type="icon-xinzenggongdan-mianxing" />
                  </div>
                </ElCol>
              </ElRow>
            </ElButton>
            <ElButton class={styles['perNum-deal']}>
              <ElRow>
                <ElCol span={20}>
                  <span class={styles['perNum-span']}>{state.detail.executedOrders}</span>
                  <br />
                  处理工单
                </ElCol>
                <ElCol span={4}>
                  <div class={styles['perNum-icon']}>
                    <AliIcon type="icon-gongdanchuli" />
                  </div>
                </ElCol>
              </ElRow>
            </ElButton>
            <ElButton class={styles['perNum-overTime']}>
              <ElRow>
                <ElCol span={20}>
                  <span class={styles['perNum-span']}>{state.detail.timeOutedOrder}</span>
                  <br />
                  超时工单
                </ElCol>
                <ElCol span={4}>
                  <div class={styles['perNum-icon']}>
                    <AliIcon type="icon-chaoshigongdan" />
                  </div>
                </ElCol>
              </ElRow>
            </ElButton>
            <ElButton class={styles['perNum-patDeal']}>
              <ElRow>
                <ElCol span={20}>
                  <span class={styles['perNum-span']}>{state.detail.executedPatrol}</span>
                  <br />
                  巡视处理
                </ElCol>
                <ElCol span={4}>
                  <div class={styles['perNum-icon']}>
                    <AliIcon type="icon-xunshigongdan" />
                  </div>
                </ElCol>
              </ElRow>
            </ElButton>
            <ElButton class={styles['perNum-patoverTime']}>
              <ElRow>
                <ElCol span={20}>
                  <span class={styles['perNum-span']}>{state.detail.timeOutedPatrol}</span>
                  <br />
                  巡视超时
                </ElCol>
                <ElCol span={4}>
                  <div class={styles['perNum-icon']}>
                    <AliIcon type="icon-xunshichaoshi" />
                  </div>
                </ElCol>
              </ElRow>
            </ElButton>
          </ElRow>
        </div>

        <ElCard shadow={'never'}>
          <div class={styles['to-bottom']}>
            <ElButton
              class={styles['to-right']}
              type="primary"
              size="default"
              onClick={() => showPages('showOrdersUpdate')}
            >
              <ElRow>
                <AliIcon type="icon-xinzenggongdan-xianxing" />
                &nbsp;&nbsp;新增工单
              </ElRow>
            </ElButton>
            <ElButton // 暂时注释掉
              class={styles['to-right']}
              type="primary"
              size="default"
              onClick={() => showPages('showPatrolsUpdate')}
            >
              <ElRow>
                <AliIcon type="icon-xinzengxunshijihua" />
                &nbsp;&nbsp;新增巡视计划
              </ElRow>
            </ElButton>
            {/* <ElButton
              class={styles['to-right']}
              type="primary"
              size="default"
              onClick={() => showPages('addTicketShow')}
            >
              <ElRow>
                <AliIcon type="icon-xinzenggongzuopiaoshenqing" />&nbsp;&nbsp;新增工作票申请
              </ElRow>
            </ElButton> */}

            <div class={styles['look-more']}>
              <ElLink
                class={styles['look-more-font']}
                type="primary"
                onClick={() => showPages('lookMore')}
              >
                查看更多&nbsp;
                <ElIcon>
                  <DArrowRight />
                </ElIcon>
              </ElLink>
            </div>
          </div>

          <div class={styles['to-bottom']}>
            <ElTabs v-model={state.activeName}>
              <ElTabPane label="工单待办" name="first"></ElTabPane>
              <ElTabPane label="巡视待办" name="second"></ElTabPane>
            </ElTabs>
          </div>

          {/* 工单待办 | 巡视待办 (列表) */}
          <TableList ref={orderTodoList} orderToDo={state.orderToDo} onToDoDetail={toDoDetail} />

          {/* 新增/编辑 工单 */}
          {state.showOrdersUpdate && (
            <OrdersUpdate
              showOrdersUpdate={state.showOrdersUpdate}
              title="新增工单"
              onHandleClose={handleOrdersUpdateClose}
            />
          )}
          {/* 新增/编辑 巡视计划 */}
          {state.showPatrolsUpdate && (
            <PatrolsUpdate
              showPatrolsUpdate={state.showPatrolsUpdate}
              title="新增巡视"
              onHandleClose={handlePatrolsUpdateClose}
            />
          )}
          {/* 新增工作票申请 */}
          {/* <AddWorkTicket :show="addTicketShow" @handleClose="addHandleClose" /> */}
        </ElCard>
      </div>
    ) : (
      <MyToDoOptions
        selectedKey={toDoState.activeTabKey}
        selectedValue={'待办'}
        visible={toDoState.visible}
        record={toDoState.record!}
        cancel={toHandleChangeOptionsVisible}
      />
    )
})
